<!--设备台账新增/编辑组件-->
<template>
    <div>
        <el-form :model="model" :rules="rules" ref="ruleForm" label-winth="100px" class="demo-ruleForm">

            <el-row>

                <el-col :span="12">

                    <el-form-item label="设备编码" prop="MachineryCode" class="item-left">
                        <el-input v-model="model.MachineryCode" placeholder="请输入设备编码"></el-input>
                    </el-form-item>

                    <el-form-item label="品牌名称" prop="MachineryBrand" class="item-left">
                        <el-input v-model="model.MachineryBrand" placeholder="请输入品牌名称"></el-input>
                    </el-form-item>

                    <el-form-item label="规格型号" prop="MachinerySpec" class="item-left">
                        <el-input v-model="model.MachinerySpec" placeholder="请输入规格型号"></el-input>
                    </el-form-item>

                    <el-form-item label="设备状态" prop="Status" class="item-left">

                        <el-select v-model="model.Status" v-loading="StatusisLoading" @focus="StatusSelect" placeholder="请选择设备状态">
                            <el-option v-for="status in MachineryStatusSelectData" :key="status" :label="status"
                                :value="status">

                            </el-option>
                        </el-select>

                    </el-form-item>

                    <el-form-item label="产能" prop="Capacity" class="item-left">
                        <el-input v-model="model.Capacity" placeholder="请输入产能"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">

                    <el-form-item label="设备名称" prop="MachineryName" class="item-right">
                        <el-input v-model="model.MachineryName" placeholder="请输入设备名称"></el-input>
                    </el-form-item>

                    <el-form-item label="设备分类" prop="MachineryTypeName" class="item-right">
                        <el-input v-model="model.MachineryTypeName" :readonly="true"
                            @focus="MachineryTypedialogVisible = true" placeholder="请选择设备分类"></el-input>
                    </el-form-item>

                    <el-form-item label="所属车间" prop="WorkshopName" class="item-left">

                        <el-select :value="model.WorkshopName" v-loading="WorkshopisLoading" @change="WorkshopChange"
                            @focus="WorkshopSelect" placeholder="请选择所属车间">
                            <el-option v-for="item in WorkshopSelectData" :key="item.Id" :label="item.WorkshopName"
                                :value="item">

                            </el-option>
                        </el-select>

                    </el-form-item>

                    <el-form-item label="位置" prop="Location" class="item-right">
                        <el-input v-model="model.Location" placeholder="请输入位置"></el-input>
                    </el-form-item>

                    <el-form-item label="购买日期" prop="PurchasingTime" class="item-right">
                        <el-date-picker v-model="model.PurchasingTime" type="date" placeholder="选择日期"
                            @input="updateDate">
                        </el-date-picker>
                    </el-form-item>

                </el-col>

            </el-row>
            <el-row>
                <el-form-item label="备注" prop="Remark" class="item-center">
                    <el-input type="textarea" v-model="model.Remark" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-row>

            <el-form-item class="item-right">
                <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>

        </el-form>

        <!--分类弹窗-->
        <el-dialog append-to-body :close-on-click-modal="false" title="所属设备分类"
            :visible.sync="MachineryTypedialogVisible" width="80%">
            <SelectedMachineryType @callback="MachineryTypeCallback" v-if="MachineryTypedialogVisible">
            </SelectedMachineryType>
        </el-dialog>

    </div>
</template>
<script>

import SelectedMachineryType from './SelectedMachineryType.vue'

export default {
    components: {
        SelectedMachineryType
    },
    props: {
        model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    mounted() {

    },
    data() {
        return {
            selectData: [],
            MachineryStatusSelectData: [],
            WorkshopSelectData: [],
            MachineryTypedialogVisible: false,
            WorkshopdialogVisible: false,
            StatusisLoading: false,
            WorkshopisLoading: false,
            rules: {
                MachineryCode: { required: true, message: '请输入设备编码', trigger: 'blur' },
                MachineryName: { required: true, message: '请输入设备名称', trigger: 'blur' },
                MachineryTypeName: { required: true, message: '请选择设备分类' },
                Status: { required: true, message: '请选择设备状态' },
                WorkshopName: { required: true, message: '请选择所属车间' },
            }
        }
    },
    watch: {
    },
    methods: {
        WorkshopChange(model) {
            this.model.WorkshopId = model.Id
            this.model.WorkshopCode = model.WorkshopCode
            this.model.WorkshopName = model.WorkshopName
        },
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.isUpdate) {
                        this.put()
                    } else {
                        this.add()
                    }
                } else {
                    this.showNotify('请输入必填项')
                    return false
                }
            })
        },
        resetForm() {
            this.$refs['ruleForm'].resetFields()
        },
        add() {

            this.$http.postForm('/api/Machinery', { model: this.model }, { loading: this.$loading() })
                .then(() => {
                    this.$emit('callback');
                    this.showNotify('新增设备成功');
                })
        },
        put() {

            this.$http.putForm('/api/Machinery', { model: this.model }, { loading: this.$loading() })
                .then(() => {
                    this.$emit('callback');
                    this.showNotify('修改设备成功');
                })
        },
        MachineryTypeCallback(model) {
            //设置分类
            this.model.MachineryTypeId = model.Id
            this.model.MachineryTypeName = model.MachineryTypeName
            this.model.MachineryTypeCode = model.MachineryTypeCode
            this.MachineryTypedialogVisible = false
        },
        //时间控件选择之后
        updateDate() {
            this.$forceUpdate();
        },
        //设备状态下拉框
        StatusSelect() {
            this.StatusisLoading = true
            this.$http.get('/api/MachineryStatus', {
                params: {
                    PageIndex: 1,
                    PageSize: 10,
                    StatusName: ''
                }
            })
                .then((res) => {
                    this.MachineryStatusSelectData = res.Data.map(item => item.StatusName)
                    console.log(res)
                    this.StatusisLoading = false
                })
        },
        //车间选择下拉框
        WorkshopSelect() {
            this.WorkshopisLoading = true
            this.$http.get('/api/Workshop/GetAll',)
                .then((res) => {
                    this.WorkshopSelectData = res.Data
                    console.log(res)
                    this.WorkshopisLoading = false
                })
        }

    }
}
</script>
<style scoped>
.item-left {
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
}

.item-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
}

.item-center {
    padding-left: 50px;
    padding-right: 50px;
}
</style>
